<template>
    <div>
        <mgs-l-map
            @onMapInited="mapInited"
            :plugins="['analysis']"
            :pluginOptions="pluginOptions"
            style="height: 500px"
        />

        <hr />

        <!-- ---------- 工具部分 START ----------- -->
        <MgsToolbarV1 :bindMap="bindMap" :items="items" />

        <hr />

        <el-button
            v-for="(item, i) in toolKeys"
            :key="i"
            @click="execItem(item)"
        >
            {{ item }}
        </el-button>

        <!-- 组件 -->
        <component
            v-for="(item, i) in toolKeys"
            :key="'comp-' + i"
            :is="item"
            :ref="item"
            :bindMap="bindMap"
            v-bind="toolDatas[item]"
        />

        <!-- ---------- 工具部分 END ----------- -->
    </div>
</template>

<script>
import tools from '@mgs/components-tool';
delete tools.install;
delete tools.BaseTool;

import MgsToolbarV1 from '@mgs/components-map/mgs-toolbar-v1.vue';

export default {
    components: { MgsToolbarV1, ...tools },
    data() {
        return {
            bindMap: null,
            pluginOptions: {
                analysis: APPCONFIG.ANALYSIS_CONFIG,
            },
            items: [
                {
                    toolname: '移动地图',
                    pkid: 3,
                    vuepath: tools.Pan,
                    begingroup: 0,
                    exectype: 1,
                    toolicon: './img/toolbar/pan_hover.png',
                },
                {
                    toolname: '几何测量',
                    vuepath: tools.Measure,
                    begingroup: 1,
                    exectype: 2,
                    toolicon: './img/toolbar/measure_hover.png',
                },
                {
                    toolname: '对比分析',
                    vuepath: tools.ViewCompare,
                    begingroup: 1,
                    exectype: 3,
                    toolicon: './img/toolbar/compare_hover.png',
                },
            ],
            toolKeys: Object.keys(tools),
            toolDatas: {
                LayerManager: {
                    baseLayers: [
                        {
                            id: '1',
                            name: 'arcgisRest1234567912121',
                            layer: '1',
                            opacity: 1,
                            visible: true,
                        },
                    ],
                },
            },

            baseMaps: [
                {
                    title: '矢量',
                    thumbnail:
                        'http://192.168.3.183:9864/webhdfs/v1/basemapimg/20210521122816.png?op=OPEN&namenoderpcaddress=ceph27:9000&offset=0',
                    services: [
                        {
                            pkid: '6f4ef0450ae048bb9b9ab2e902366d14',
                            servicetype: 1,
                            nodetype: 's',
                            serviceurl:
                                '/geoesb/proxy/services/maps/rest/6f4ef0450ae048bb9b9ab2e902366d14/{userKey}',
                            basemap_title: '全球矢量图',
                            pid: 2,
                            order_index: 1,
                            servicename: '全球矢量图',
                            serviceid: '6f4ef0450ae048bb9b9ab2e902366d14',
                        },
                    ],
                },
                {
                    title: '地形',
                    thumbnail:
                        'http://192.168.3.183:9864/webhdfs/v1/basemapimg/20210521122821.png?op=OPEN&namenoderpcaddress=ceph27:9000&offset=0',
                    services: [
                        {
                            pkid: '265f571f478243829e123da23426dbb4',
                            servicetype: 1,
                            nodetype: 's',
                            serviceurl:
                                '/geoesb/proxy/services/maps/rest/265f571f478243829e123da23426dbb4/{userKey}',
                            basemap_title: '全球地形晕眩图',
                            pid: 3,
                            order_index: 1,
                            servicename: '全球地形晕眩图',
                            serviceid: '265f571f478243829e123da23426dbb4',
                        },
                    ],
                },
                {
                    title: '影像',
                    thumbnail:
                        'http://192.168.3.183:9864/webhdfs/v1/basemapimg/20210521122824.png?op=OPEN&namenoderpcaddress=ceph27:9000&offset=0',
                    services: [
                        {
                            pkid: '80739f05af994153a189e8c44ab98c3d',
                            servicetype: 1,
                            nodetype: 's',
                            serviceurl:
                                '/geoesb/proxy/services/maps/rest/80739f05af994153a189e8c44ab98c3d/{userKey}',
                            basemap_title: '全球影像',
                            pid: 1,
                            order_index: 1,
                            servicename: '全球影像',
                            serviceid: '80739f05af994153a189e8c44ab98c3d',
                        },
                    ],
                },
            ],
        };
    },
    methods: {
        mapInited(mapvm) {
            mapvm.addService(
                '1',
                'arcgisrestmap',
                'https://server.arcgisonline.com/arcgis/rest/services/Specialty/DeLorme_World_Base_Map/MapServer'
            );
            this.bindMap = mapvm;
        },
        execItem(item) {
            const comp = this.$refs[item][0];
            comp.exec();
        },
    },
};
</script>
